import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { AtButton , AtRate} from 'taro-ui';
import { getOrderDtl , inviteAcOrder } from '../../util/api';
import './driverorderdtl.scss';
import { navigateMap } from '../../util/util';
export default class driverorderdtl extends Component {
    constructor(){
        super(...arguments);
        this.state = {
            id:"",
            type:"",
            info:{},
        }
    }
    componentWillMount(){
        let { type = 0 , id } = this.$router.params;
        getOrderDtl({type:0,id}).then( res => {
            if(res.code == 0){
               this.setState({type,id,info:res.data});
            }
        })
    }
    handleChange(event){
        this.setState({
            value: event.target.value
        })
    }
    inviteOrder(id){ //邀请截单
        Taro.showModal({
            title:"提示",
            content:"确认邀请对方接单吗"
        }).then( res => {
            if(res.confirm){
                inviteAcOrder({user_id:id}).then( res => {
                    if(res.code == 0 ){
                        Taro.showToast({title:res.msg});
                    }else{
                        Taro.showToast({title:res.msg,icon:"none"});
                    }
                })
            }
        })
    }
    watchComment(id){
        Taro.navigateTo({
            url:"/pages/commentList/commentList?id="+id
        })
    }
    //打电话
    callPhone(phoneNumber){
        Taro.makePhoneCall({ phoneNumber })
    }
    //地图
    navMap(){
       navigateMap(...arguments);
    }
    render(){
        let { info , model } = this.state;
        return (
            <View className='drive-orderdtl'>
                <View className='address'>
                    <View className='ot-item flex align-items space-between ot-first'>
                        <Image className='left' src={`${baseImgSrc}/address_fa.png`}  />
                        <View className='right flex1'>{info.address}</View>
                        <Image className='map_icon' src={`${baseImgSrc}/tx_map.png`} onClick={this.navMap.bind(this,info.go_lat,info.go_lon,info.go_address,'')} />
                    </View>
                    <View className='ot-item flex align-items space-between'>
                        <Image className='left' src={`${baseImgSrc}/address_dao.png`} />
                        <View className='right flex1'>{info.go_address}</View>
                        <Image className='map_icon' src={`${baseImgSrc}/tx_map.png`} onClick={this.navMap.bind(this,info.go_lat,info.go_lon,info.go_address,'')} />
                    </View>
                </View>
                <View className='info-card'>
                    <View className='beizhu flex align-items flex-start'>
                        <Text className='beizhu-txt'>出发时间：</Text>
                        <Text classNames='beizhu-dang'>{info.start_time}</Text>
                    </View>
                    <View className='beizhu flex align-items flex-start'>
                        <Text className='beizhu-txt'>备注：</Text>
                        <Text classNames='beizhu-dang'>{info.is_dang}</Text>
                    </View>
                </View>
                <View className='orderinfo'>
                    <View className='item flex align-items flex-start'>
                        <Text className='item-txt1'>订单编号：</Text>
                        <Text className='item-txt2'>{info.order}</Text>
                    </View>
                    <View className='item last flex  align-items flex-start'>
                        <Text className='item-txt1'>下单时间：</Text>
                        <Text className='item-txt2'>{info.start_time}</Text>
                    </View>
                </View>
                <View className='driver-card '>
                    <View className='top flex align-items space-between' onClick={this.watchComment.bind(this,info.user_id)}>
                        <View className='left'>
                            <Image className='left-pic' src={info.headimg} />
                        </View>
                        <View className='flex1 right flex flex-wrap align-content-around'>
                            <View className='name flex align-items flex-start'>
                                <Text className='name-txt'>{info.nickname}</Text>
                                <View className='yanzheng fn-ctr'>已通过人脸识别</View>
                            </View>
                            <View className='name flex align-items space-between'>
                                <AtRate value={5} size={15} />
                                <Text className='dance-taxt'>已接单{info.counts}次</Text>
                            </View>
                        </View>
                    </View>
                    {
                        info.is_end == 0  ? (
                            <View className='opt flex align-items flex-start'>
                                {/* <View className='item fn-ctr'>
                                    <Image className='item-img' src={`${baseImgSrc}/chat.png`} />
                                    <Text className='item-txt'>聊一聊</Text>
                                </View> */}
                                <View className='item fn-ctr' onClick={this.callPhone.bind(this,info.phone)}>
                                    <Image className='item-img'  src={`${baseImgSrc}/phone.png`} />
                                    <Text className='item-txt' >联系他</Text>
                                </View>
                            </View>
                        ) : ""
                    }
                </View>
                <View className='btn-list'>
                    <AtButton className='next-btn' type='primary' size='normal' onClick={this.inviteOrder.bind(this,info.user_id)}>邀请接单</AtButton>
                </View>
            </View>
        )
    }
}